$(function(){
  
// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
const layer = layui.layer
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options)

$('#chooseImg').on('click', function() {
  $('#file').click()
})
//点击上传按钮唤起上传文件的功能
// 为文件选择框绑定 change 事件
$('#file').on('change', function(e) {
  // 获取用户选择的文件
  let fileList = e.target.files
  if (fileList.length === 0) {
    return layer.msg('请选择图片')
  }

  // 1. 拿到用户选择的文件
  let file = e.target.files[0]
  // 2.根据选择的文件，创建 URT 地址
  var newImgURL = URL.createObjectURL(file)
  // 3. 创建重新选择的图片的裁剪区域
  $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', newImgURL) // 重新设置图片路径
    .cropper(options) // 重新初始化裁剪区域
})


$('#uploadImg').on('click',function(e){
  // 1.拿到用户裁剪之后的头像(需要是base64位格式字符串)
  let dataURL = $image
.cropper('getCroppedCanvas', {
  // 创建一个 Canvas 画布
  width: 100,
  height: 100
})
//把图片转换成 base64 位的格式字符串
.toDataURL('image/png')
// 2.发送ajax请求，携带参数发送到服务器
$.ajax({
  method: 'POST',
  url: '/my/update/avatar',
  data: {
    avatar: dataURL
  },
  success: function(res) {
    if (res.status !== 0) {
      return layer.msg('更换头像失败！')
    }
    layer.msg('更换头像成功！')
    //调用 父级页面的 getuserInfo()
    window.parent.getUserInfo()
  }
})
})


})